<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>登录页</h1>

<form action="">
    <p>
        账号
        <input type="text" id="uname">
    </p>
    <p>
        密码
        <input type="password" id="pwd">
    </p>
    <p>
        验证码
        <input type="text" id="captcha">
        <img src="http://kg.zhaodashen.cn/v1/public/captcha.jsp" alt="">
    </p>
    <p>
        记住密码
        <input type="checkbox">
    </p>
    <p>
        <input type="submit" value="登录">
    </p>
</form>
<script src="./axios.js"></script>
<script>
    // 获取按钮-绑定点击事件
    document.querySelector("input[type=submit]").onclick = async function(evt){
        // 获取事件对象 阻止表单提交
        let e = evt || window.event
        e.preventDefault()
        let uname = document.querySelector('#uname').value
        let pwd = document.querySelector('#pwd').value
        let captcha = document.querySelector('#captcha').value
        // 异步请求获取数据
        let res = await post("http://kg.zhaodashen.cn/v1/public/login.jsp",{uname,pwd,captcha},"json")
        // 判断状态
        if (res.meta.state ===200)
        {
            let checkboxState = document.querySelector("input[type = 'checkbox']").checked
            // 判断账号密码保存方式
            if (checkboxState)
            {
                localStorage.setItem("uname",res.data.uname)
                localStorage.setItem("expires",(new Date).getTime()+1000*20)

            }else{
                sessionStorage.setItem("uname",res.data.uname)
            }
            // 跳转会员中心
            location.href = "./member.html"
        }else{
            alert(res.meta.msg)
            document.querySelector("img").src = "http://kg.zhaodashen.cn/v1/public/captcha.jsp?t"+(new Date).getTime()
        }
        // 失败自动获取焦点
        if (res.meta.msg=="您输入的验证码有误"){
            document.getElementById("captcha").focus()
        }else{
            document.getElementById("uname").focus()
        }
    }
    // 点击刷新图片
    document.querySelector("img").onclick = function(){
        this.src = "http://kg.zhaodashen.cn/v1/public/captcha.jsp?t"+(new Date).getTime()
    }
</script>
</body>
</html>